接下來會開始介紹各種複合選擇器，複合選擇器是指將多個基本選擇器組合在一起，我們可以更精確地選擇特定的 HTML 元素。這些選擇器可以基於元素的類別、結構、層次關係等條件來篩選元素，本篇將聚焦於交集選擇器。

交集選擇器（Intersection Selector）用於選中同時符合多個條件的元素，可以根據需要，選擇不同的組合來選中特定的元素。

💠交集選擇器-基本用法

語法

選擇器1選擇器2選擇器3…選擇器n {
  屬性名: 屬性值;
}

• 將多個選擇器無間隔連接在一起，以選擇同時滿足所有條件的元素。

範例

<p>什麼都沒有</p>
<p class="rich">財富自由</p>
<p class="beauty">美貌天仙</p>
<p class="rich beauty">財富自由又美貌天仙</p>

p {
  padding: 10px;
}

.rich {
  background-color: gold;
}

p.beauty {
  background-color: pink;
}

.rich.beauty {
  background-image: linear-gradient(gold, pink);
}

舉個符合人生的例子，當 class 為 rich 時，我們的背景就會是閃閃發光的金黃色；當元素為 <p> 而且類別為 beauty 時，背景會是粉色；而既 rich 又 beauty 時，背景就會呈現金粉漸層！簡直就是人生勝利組呀~~~

但交集選擇器不建議連接過多的選擇器，例如：

p#title.rich.beauty.bad { ... }

一次要太多的結果就會變成這樣，寫法看起來會過於複雜，影響代碼的可讀性和維護性。為了保持代碼清晰，應避免使用過於複雜的選擇器組合。

💠實務應用：當前頁籤

一起試試：[CODEPEN]

大家應該很常看到有些可以切換的內容，在我們切換頁籤時，當前的頁籤就會高亮顯示。

比方說上圖的 iT 邦幫忙的技術問答區塊，右上角的頁籤，點擊切換後，當前頁籤就會呈現藍色，像這種狀態，我們也可以用交集選擇器來做：

<ul>
  <li>
    <a href="/" class="active">最新</a>
  </li>
  <li>
    <a href="/">熱門</a>
  </li>
  <li>
    <a href="/">已解決</a>
  </li>
</ul>

a {
  padding: 10px 20px;
  color: #62808f;
  background-color: #d5dfe3;
  text-decoration: none;
}

a.active {
  color: #fff;
  font-weight: bold;
  background-color: #00a0e9;
}

當 <a> 元素擁有 active 類別時，該頁籤會變為藍色。當然切換的部份還是得靠 JS 來做，這邊有做了切換效果，讓大家可以感受一下。簡單來說，就是切換時將 class 加上 active 類別就搞定囉！

其實 CSS 用法非常多，像這樣的效果也可以通過其它方法實現，例如直接給當前頁籤添加 .menu-active 類別：

<ul>
  <li>
    <a href="/" class="menu-active">最新</a>
  </li>
  <li>
    <a href="/">熱門</a>
  </li>
  <li>
    <a href="/">已解決</a>
  </li>
</ul>

a {
  padding: 10px 20px;
  color: #62808f;
  background-color: #d5dfe3;
  text-decoration: none;
}

.menu-active {
  color: #fff;
  font-weight: bold;
  background-color: #00a0e9;
}

💠總結

• 交集選擇器用於當元素同時符合多個條件時呈現特定樣式。
• 為了保持代碼的可讀性和可維護性，應謹慎使用過於複雜的選擇器組合
• 交集選擇器可以用於當前頁籤的效果，但不一定非要使用交集選擇器。

本文將同步更新至 Lala Code